<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!--    <meta charset="UTF-8">-->
    <!--    <title>产品菜单1</title>-->
    <!--    <link th:href="@{login/css/bootstrap1.css}" rel="stylesheet"/>-->

    <!--    <script th:src="@{login/js/bootstrap1.js}"></script>-->
    <!--    <script th:src="@{/login/js/jquery.js}"></script>-->
    <myhead th:replace="basic/layout :: head('管理员页面')"></myhead>
    <link th:href="@{/login/css/productTab.css}" rel="stylesheet"/>
</head>
<body>
<!--删除页面ajax法,后台主页面-->
<div class="container">
    <div style="background-color: #0a53be;height: 50px">
        <ul style="float: left">
            <li class="navItem" >
                <a th:href="@{/toAdmin}"><h4 style="margin-top: 10px;margin-left: -20px;">商品管理系统-管理员</h4></a>
            </li>
        </ul>
        <ul style="float: right">
            <li class="navItem">
                <a th:href="@{/toAdmin}">管理员</a>
            </li>
            <li class="navItem">
                <a th:href="@{/productTable1}">退出</a>
            </li>
        </ul>
    </div>
    <div class="row" style="width: 100%;margin: -10px 0;">
        <div style="position: relative;" class="col-12">
            <div id="liveAlertPlaceholder" style="position:fixed;top:38%;right:46%;"></div>
            <h3 class="card-title" style="margin-bottom: 10px">用户列表</h3>
            <a href="/toRegister" class="btn btn-primary insert btn-sm">注册新用户</a>
            <table class="table table-hover w-100">
                <thead class="table-light">
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="user:${users}">
                    <td>
                        <span class="num"></span>
                    </td>
                    <td th:text="${user.username}"></td>
<!--                    使用*替换密码-->
                    <td th:text="${#strings.repeat('*', #strings.length(user.password))}"></td>
                    <td>
                        <button type="button" class="btn btn-danger" th:data-id="${user.id}"
                                onclick="showModal(this.dataset.id)">
                            注销
                        </button>
                    </td>
                </tr>
                </tbody>
                <script>
                    //序号的自动编号
                    document.querySelectorAll('.num').forEach((span, index) => {
                        span.textContent = index + 1;
                    });
                </script>
            </table>
        </div>
    </div>

    <!--模态框-->
    <div class="modal" tabindex="-1" id="deleteModal">
        <div class="modal-dialog">
            <div class="modal-content" style="">
                <div class="modal-header">
                    <h3 class="modal-title" style="color: red;font-size: 20px">警告</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>请确认是否注销</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger" onclick="deleteUser()">注销</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    //删除提示框法一
    const alterDom = document.getElementById("liveAlertPlaceholder")
    const alert = (message, type) => {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = [
            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
            `   <div>${message}</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('')

        alterDom.append(wrapper)
    }
    var deleteId;
    // 模态框：提示是否删除
    var myModal = new bootstrap.Modal(document.getElementById('deleteModal'), {
        keyboard: false        // 按 ESC 不能关闭
    });//模态框
    function showModal(productId) {
        myModal.show()//打开模态框
        deleteId = productId;
    }

    function deleteUser() {
        myModal.hide();
        $.ajax({
            type: 'DELETE',//访问类型：DELETE, POST, GET, PUT
            url: '/deleteUser',//访问路径
            data: {id: deleteId,},//url请求参数:参数名:变量参数
            success: function (resp) {
                if (resp == "OK") {
                    alert("注销成功", "success");
                    setTimeout(() => {
                        location.reload();   // 重新加载 当前页面，列表就少了被删那一行，当不刷新时控制台会显示全部代码文件
                    }, 500);
                }
            },
            error: function () {
            }
        });
    }
</script>
</html>
